<template>
  <view class="shelf" @click="onClick(data.id)">
    <view class="shelf-info">
      <view class="shelf-info__name" v-if="data.goodsName">
        {{ data.goodsName }}
      </view>

      <text class="notice">
        <nut-icon name="notice" :custom-color="data.subscriptionFlag ? '#496cf2' : '#8b8b8b'" size="15" />
      </text>
      <text class="shelf-info__number" v-if="data.price">{{ data.price }}元</text>
      <text class="shelf-info__number" v-if="data.number">{{ data.number }}件</text>
      <text class="shelf-info__number" v-if="data.brand">{{ data.brand }}</text>
      <view class="shelf-info__life">
        {{ data.productionDate }}到{{ data.shelfLife }}·
        <text>{{ date.diff }}天</text>
        ·
        <text :style="{ color: date.color }">{{ date.progres }}%</text>
      </view>
      <view class="shelf-info__progress">
        <nut-progress size="small" :stroke-color="date.color" :show-text="false" :percentage="date.progres" />
      </view>
    </view>

    <view class="shelf-day">
      {{ date.day }}
      <text>天</text>
    </view>
  </view>
</template>

<script setup>
import { toRefs, computed } from "vue";
import dayjs from "dayjs";
import { onLink } from "@/hooks/useRoute";

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { data } = toRefs(props);

const date = computed(() => {
  const now = dayjs();
  const shelfLife = dayjs(data.value.shelfLife);
  const productionDate = dayjs(data.value.productionDate);
  const diff = Math.floor(shelfLife.diff(productionDate, "day"));
  const day = Math.floor(shelfLife.diff(now, "day"));
  const progres = Math.floor((day / diff) * 100);
  let color = "#55af4e";
  if (progres < 75) {
    color = "#4973f2";
  }
  if (progres < 50) {
    color = "#ffa30d";
  }
  if (progres < 25) {
    color = "#fa2c19";
  }

  return { day, progres, diff, color };
});

function onClick(id) {
  onLink(`/pages/edit/index?id=${id}`);
}
</script>

<style lang="scss">
.shelf {
  padding: 30rpx;
  background: #ffffff;
  display: flex;
  border-bottom: #ebebeb 1rpx solid;
}

.shelf-info {
  flex: 3;

  &__name {
    font-size: 32rpx;
    font-weight: 700;
    display: inline-block;
    width: 530rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__number {
    background: #f2f2f2;
    color: #8b8b8b;
    padding: 0 10rpx;
    font-size: 28rpx;
    border-radius: 4rpx;
    margin-right: 12rpx;
  }

  &__life {
    margin-top: 10rpx;
    font-size: 27rpx;
    color: #999;
  }

  &__progress {
    margin-top: 10rpx;
  }
}

.shelf-day {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 40rpx;
  font-weight: 700;

  text {
    font-size: 28rpx;
    margin-left: 10rpx;
  }
}

.notice {
  margin-right: 10rpx;
  position: relative;
  top: 10rpx;
}
</style>
